<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>收集表单数据</title>
    <!-- 引入Vue.js -->
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <form @submit.prevent="demo">  <!-- 为提交事件绑定方法 -->
        <!-- v-model.trim：去除收集的数据两端的空格 -->
        <label>账号：<input type="text" v-model.trim="userInfo.account"/></label><br /><br />
        <label>密码：<input type="password" v-model="userInfo.password "/></label><br /><br />
        <!-- v-model修饰符 v-model.number：收集的数据转化为number类型 
          type="number"：限制输入的内容为数字-->
        <label>年龄：<input type="number" v-model.number="userInfo.age "/></label><br /><br />
        性别：
        <!-- 注意：radio,checkbox和select 使用v-model需要指定value值 -->
        <!-- name属性用于分组  -->
        <input type="radio" name="sex" value="male" v-model="userInfo.sex"/>男
        <input type="radio" name="sex" value="female" v-model="userInfo.sex"/>女<br /><br />
        爱好：
        <!-- 注意：checkbox使用v-model收集的数据要使用一个数组进行存放数据 -->
        <input type="checkbox" v-model="userInfo.hobby" value="chouyan"/>抽烟
        <input type="checkbox" v-model="userInfo.hobby" value="hejiu"/>喝酒
        <input type="checkbox" v-model="userInfo.hobby" value="tangtou"/>烫头 <br><br>
        所属校区：
        <select v-model="userInfo.city">
          <option value="">请选择校区：</option>
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="shenzhen">深圳</option>
          <option value="wuhan">武汉</option>
        </select><br><br>
        其它信息：  
        <!-- v-model.lazy：失焦时收再集数据,如果不使用lazy修饰符,会实时收集数据 -->
        <textarea rows="5" cols="30" v-model.lazy="userInfo.other"></textarea><br><br>
        <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》</a><br><br>
        <!-- 阻止触发提交的默认行为 -->
        <!-- <button @click.prevent>提交</button> -->
        <button>提交</button>
      </form>
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: "#root",
      data() {
        return {
          userInfo:{
            account:"",
            password:"",
            age:"",
            sex:"female",
            hobby:["chouyan"],// 数组形式获取到选择的value值
            city:"beijing",
            other:"",
            agree:false,  // 字符串/boolean类型获取checked的值
          }
        };
      },
      methods: {
        demo(){
          // console.log(this.$data); // vm._data === vm.$data
          // console.log(JSON.stringify(this._data)); 
          console.log(JSON.stringify(this.userInfo)); // 输出为JSON格式的字符串
        } 
      },
    })
  </script>
</html>
